.frame {
  position: absolute;
  width: 400px;
  height: 400px;
  inset: 0;
  margin: auto;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  color: #fff;
}

.pics {
  padding: 2px;
}
.pics .pic {
  position: relative;
  float: left;
  margin: 2px;
  width: 128px;
  height: 128px;
  cursor: pointer;
  background-color: #000;
  animation: small 0.5s ease-in-out both;
  transition: transform 0.5s ease-in-out, z-index 0s linear 0.5s;
}
.pics .pic.active {
  animation: big 0.5s ease-in-out both;
}
.pics .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.5s ease-in-out;
}
.pics .pic.away img {
  opacity: 0;
}

.pic-1 {
  transform-origin: 0% 0%;
}

.pic-2 {
  transform-origin: 50% 0%;
}

.pic-3 {
  transform-origin: 100% 0%;
}

.pic-4 {
  transform-origin: 0% 50%;
}

.pic-5 {
  transform-origin: 50% 50%;
}

.pic-6 {
  transform-origin: 100% 50%;
}

.pic-7 {
  transform-origin: 0% 100%;
}

.pic-8 {
  transform-origin: 50% 100%;
}

.pic-9 {
  transform-origin: 100% 100%;
}

@keyframes big {
  0%, 1% {
    transform: scale(1);
    z-index: 2;
  }
  100% {
    z-index: 2;
    transform: scale(3.0625);
  }
}
@keyframes small {
  0% {
    z-index: 2;
    transform: scale(3.0625);
  }
  99% {
    transform: scale(1);
    z-index: 2;
  }
  100% {
    z-index: 1;
  }
}